<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 浮动 -->
    float left 靠左浮动,right靠右浮动
    1.浮动只会和相邻的浮动元素一起生效
    2.浮动元素之间如果不相邻,那中间未被浮动的块级元素会独占一行,后边的浮动元素就会被挤到未被浮动元素下边进行浮动
    3.浮动起来之后,之后的元素会在底层被覆盖显示,所以一般在浮动的元素外会再套一个块级元素
    4.在浮动元素套上父级块级元素时候,此时后面的和父级元素同级的块级元素不会在底层覆盖显示,因为父级元素独占一行,同级只能被挤到下一行显示
    <!-- 清除浮动 -->
    overflow:hidden 还可以溢出隐藏
    clear: both
    <!-- 隐藏元素 -->
    visibility: hidden;
</body>


</html>